/***************** video_control start *************/

/***Toda a barra de controle de video***/
.fw_video_control{
    position:absolute;
    width:1024px;
    bottom:0px;
    height:60px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: auto;
    margin-right: auto;

}
.fw_video-control span {
    font-size: 18px;
    font-family: interstate_light;
}

/***Range  bar que aumenta de acordo com o tempo***/
.fw_seek_bar_range{
    position: absolute;
    background: #E4D3D3;
    height: 5px;
    width: 34px;
    left: 66px;
    border-radius: 10px;
    top: 20px;
}
/**tempo atual**/
.fw_seek_line_now{
    position: absolute;
    font-size: 19px;
    bottom: 17px;
    left: 0;
    color: white;
}

/**duracao**/
.fw_seek_line_out{
    position: absolute;
    font-size: 19px;
    bottom: 17px;
    right: 0;
    color: white;
}


/*botão play da barra de controle de video */
.fw_btn_play {
    left: 40px;
    position: absolute;
    background: url(../data/imgs/btn_play_on.png)no-repeat;
    height: 26px;
    width: 24px;
    bottom: 17px;
    cursor: pointer;
}
.fw_btn_play:hover{
    background: url(../data/imgs/btn_play_off.png)no-repeat;
}
.fw_btn_play.fw_off{
    background: url(../data/imgs/btn_play_off.png)no-repeat;
}
.fw_btn_play.fw_off:hover{
    background: url(../data/imgs/btn_play_on.png)no-repeat;
}

/**botão mudo**/
.fw_btn_mute {
    right: 145px;
    position: absolute;
    background: url(../data/imgs/btn_audio_on.png)no-repeat;
    height: 31px;
    width: 35px;
    position: absolute;
    bottom: 13px;
    cursor: pointer;
}.fw_btn_mute:hover {
     background: url(../data/imgs/btn_audio_off.png)no-repeat;
 }.fw_btn_mute.fw_off {
      background: url(../data/imgs/btn_audio_off.png)no-repeat;
  }.fw_btn_mute.fw_off:hover {
       background: url(../data/imgs/btn_audio_on.png)no-repeat;
   }


   /**botão de ativar e desativar legenda**/
.fw_btn_legenda {/*sem imagem off*/
    right: 75px;
    position: absolute;
    background: url(../data/imgs/btn_legenda.png)no-repeat;
    height: 30px;
    width: 38px;
    bottom: 14px;
    cursor:pointer;
}.fw_btn_legenda:hover{
 }.fw_btn_legenda.fw_off{
      background: url(../data/imgs/btn_legenda.png)no-repeat;
  }.fw_btn_legenda.fw_off:hover{
   }

   /**composta por toda a barra de tempo desde o tempo atual até a duração com a range bar no meio**/
.fw_seek_line{
    position: absolute;
    left: 128px;
    bottom: 0px;
    height: 52px;
    width: 635px;
}

/****range da seek line*****/
.fw_seek_line input[type="range"]{
    position: absolute;
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 500px;
    border-radius: 2px;
    left: 66px;
}

/**detalhes do range**/
.fw_seek_line input[type="range"]::-webkit-slider-thumb{

    -webkit-appearance:none;
    -moz-apperance:none;
    width:25px;
    height:25px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
    border: 1px solid #787878;
}

.fw_seek_line input[type="range"]::-moz-range-thumb{
    -webkit-appearance:none;
    -moz-apperance:none;
    width:25px;
    height:25px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    background: #fefefe;
    border: 1px solid #787878;
}
.fw_seek_line input[type="range"]::-moz-range-track{
    background:rgba(224, 222, 222, 0.57);
}

/***************** video_control end */


/***************** *modal menu start *************/
.fw_modal{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    width: 920px;
    height: 635px;
    z-index: 9999;
    right: 0;  left: 0;  margin: 0 auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
}

.fw_modal_texto{
    position: absolute;
    color: white;
    padding: 30px;
}
/***************** *modal end */


/***************** *modal video start *************/

.fw_modal_video_play.off{
    position: absolute;
    background: black;
    width: 1024px;
    height: 768px;
    z-index: 9997;
    display:block;
}

.fw_modal_video_play{
    z-index: 9997;
    position:absolute;
    display:none;
    height:768px;
    width:1024px;
    background-color:rgba(0,0,0,0.7);
}

.fw_modal_video_play .fw_off{
    display:block; !important
}


.fw_modal_video_play .fw_btn_pause{
    z-index: 2147483649;
    height: 118px;
    cursor: pointer;
    width: 115px;
    left: 454px;
    background: url(../data/imgs/Pause_full.png)no-repeat;
    position: absolute;
    top: 328px;
}.fw_modal_video_play .fw_btn_pause:hover{
     background: url(../data/imgs/Play_full.png)no-repeat;
 }
.fw_modal_video_play > .fw_btn_pause:hover{
    background: url(../data/imgs/Play_full.png)no-repeat;
}
/***************** *modal end */



/***************** *menu start *************/
.fw_btn_menu {

    right: 1px;
    cursor:pointer;
    position: absolute;
    background: url(../data/imgs/btn_menu.png)no-repeat;
    height: 52px;
    width: 52px;
    background-position: center;
    z-index: 2147483649;
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 6px;
    border-radius: 0px;
}.fw_btn_menu:hover{
     background-color: rgba(0, 0, 0, 0.8);
 }


.fw_sub_menu{/*setar right:auto resulta em menu sem legenda(icone)*/
    z-index: 2147483648;
    display:none;
    position:absolute;
    bottom: 50px;
    right:0px;
    list-style:none;
}.fw_sub_menu:hover{
     display:block;
 }


.fw_sub_menu li{
    padding:10px;
    background-color: rgba(0, 0, 0, 0.8);
    width: 200px;
    height: 34px;
    margin: 2px 0;
    z-index: 9999;
}

.fw_sub_menu li:nth-child(1) {
    -webkit-transition: all 0.1s ease 0.5s;
    -moz-transition: all 0.1s ease 0.5s;
    -o-transition: all 0.1s ease 0.5s;
    -ms-transition: all 0.1s ease 0.5s;
    transition: all 0.1s ease 0.5s;
}

.fw_sub_menu li:nth-child(2) {
    -webkit-transition: all 0.1s ease 0.4s;
    -moz-transition: all 0.1s ease 0.4s;
    -o-transition: all 0.1s ease 0.4s;
    -ms-transition: all 0.1s ease 0.4s;
    transition: all 0.1s ease 0.4s;
}

.fw_sub_menu li:nth-child(3) {
    -webkit-transition: all 0.1s ease 0.3s;
    -moz-transition: all 0.1s ease 0.3s;
    -o-transition: all 0.1s ease 0.3s;
    -ms-transition: all 0.1s ease 0.3s;
    transition: all 0.1s ease 0.3s;
}

.fw_sub_menu li:nth-child(4) {
    -webkit-transition: all 0.1s ease 0.2s;
    -moz-transition: all 0.1s ease 0.2s;
    -o-transition: all 0.1s ease 0.2s;
    -ms-transition: all 0.1s ease 0.2s;
    transition: all 0.1s ease 0.2s;
}

.fw_sub_menu li:nth-child(5) {
    -webkit-transition: all 0.1s ease 0.1s;
    -moz-transition: all 0.1s ease 0.1s;
    -o-transition: all 0.1s ease 0.1s;
    -ms-transition: all 0.1s ease 0.1s;
    transition: all 0.1s ease 0.1s;
}

.fw_sub_menu li:nth-child(6) {
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
}



.fw_sub_menu li a {
    color:white;
    cursor:pointer;
    text-decoration: none;
    position: absolute;
    height: 30px;
    cursor: pointer;
    font-family: interstate_light;
    font-size: 23px; color:#fff;
}

.fw_sub_menu li a i {
    margin-right: 50px;
}



.fw_btn_inicio{
    background: url(../data/imgs/btn_inicio_m.png)no-repeat;
}.fw_btn_inicio:hover{
 }

.fw_btn_audio{
    background: url(../data/imgs/btn_audio_m.png)no-repeat;
}.fw_btn_audio:hover{
     background: url(../data/imgs/btn_audio_off_m.png)no-repeat;
 }.fw_btn_audio.fw_off{
      background: url(../data/imgs/btn_audio_off_m.png)no-repeat;
  }.fw_btn_audio.fw_off:hover{
       background: url(../data/imgs/btn_audio_m.png)no-repeat;
   }

.fw_btn_tela_cheia{
    background: url(../data/imgs/btn_tela_cheia_m.png)no-repeat;
}.fw_btn_tela_cheia:hover{
     background: url(../data/imgs/btn_tela_cheia_off_m.png)no-repeat;
 }.fw_btn_tela_cheia.fw_off{
      background: url(../data/imgs/btn_tela_cheia_off_m.png)no-repeat;
  }.fw_btn_tela_cheia.fw_off:hover{
       background: url(../data/imgs/btn_tela_cheia_m.png)no-repeat;
   }

.fw_btn_ajuda{
    background: url(../data/imgs/btn_ajuda_m.png)no-repeat;
}

.fw_btn_inicio{
    background: url(../data/imgs/btn_inicio_m.png)no-repeat;
}

.fw_btn_credito{
    background: url(../data/imgs/btn_credito_m.png)no-repeat;
}

.fw_btn_fechar{
    background: url(../data/imgs/btn_fechar_m.png)no-repeat;
}


/****************** menu end */

/****************** legenda start *************/
.fw_legenda {
    z-index: 2147483647;
    bottom: 80px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    text-align: center;
    display: none;
}
.fw_legenda > p {
    display: none;
    background: rgba(0,0,0,0.7);
    color: #E5E31E;
    font-size: 40px;
    border-radius: 10px;
    padding: 10px;
}

input[type='range']::-ms-track {
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;

    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type='range']::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type='range']::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type='range']::-ms-thumb {
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}
.modal_final {
    text-align:center;
}
